<template>
  <div id="operatelist"> 


          <el-table :data="datalist" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">
                
                 <el-table-column label="成立时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.time }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="姓名"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                  <el-table-column label="手机号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="头像"  align='center' >                   
                    <template slot-scope="scope">                   
                       <img  style="width: 30px; height: 30px" :src="urlimg + scope.row.icon" /> 
                    </template>
                </el-table-column>
                 <!-- <el-table-column :label="variable_name2 + '券数量'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.ticket_number }}</span>
                    </template>
                </el-table-column> -->
                 <el-table-column label="贡献值"  align='center' >                   
                    <template slot-scope="">                   
                        <span >暂无</span>
                    </template>
                </el-table-column>
                  <el-table-column label="团长数"  align='center'  width="100px">                   
                    <template slot-scope="scope">   
                        <span>                
                          {{ scope.row.leader_count }}<span @click="see_team(scope.row)"><i class="el-icon-view el-icon--right"></i></span>
                        </span>
                    </template>
                </el-table-column>
                 <el-table-column label="中心数据"  align='center' >                   
                    <template slot-scope="scope">                   
                      <span>                
                         <i class="el-icon-view el-icon--right" @click="tj_but(scope.row)"></i>
                    </span>
                    </template>
                </el-table-column>



                 <el-table-column label="操作" align='center' width="350px" fixed="right">
                    <template slot-scope="scope"> 
                        <!-- <el-button size="mini"  type="primary" class="button_class1"  plain @click="go_gmbut(scope.row)">{{ variable_name1 }}</el-button>  -->
                        <el-button size="mini"  type="primary" class="button_class2"  plain @click="xgej_but(scope.row)">二级密码</el-button>
                        <el-button size="mini"  type="primary" class="button_class1" plain @click="xg_but(scope.row)">修改</el-button> 
                        <el-button size="mini"  type="primary" class="button_class2" plain @click="mtk3_but(scope.row)">团队</el-button>
                        <el-button size="mini"  type="primary" class="button_class1" plain @click="go_but(scope.row)">管理员</el-button> 
                    </template>
                </el-table-column>

  
            </el-table>  


       <!-- 修改 -->
        <el-dialog title="修改" :visible.sync="mtk1"  width="400px">
            <div style="width:100%;"> 

            <el-form ref="form"   label-width="100px" style="width:100%;"> 
                 <el-form-item label="名称" label-width="80px" >
                    <el-input v-model="mtk1_form.name" placeholder="名称"></el-input>
                </el-form-item>
                 <el-form-item label="手机号" label-width="80px" >
                    <el-input v-model="mtk1_form.telphone" placeholder="手机号"></el-input>
                </el-form-item>  
                   <el-form-item label="头像" label-width="80px" >
                      <el-upload 
                            action="uploadUrl"  
                            :show-file-list="false"   
                            :before-upload="beforeupload"
                            :http-request="ImgUploadSectionFile">
                            <div class="avatar-uploader">
                                <img v-if="mtk1_form.head_img"  :src="mtk1_form.head_img" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                      </el-upload>
                </el-form-item>                                
            </el-form>

                <div style="text-align: center;width:50%;margin:auto;margin-top:30px;">
                    <el-button type="primary" style="width:100%;" class="custom_color_button" @click="xg_but_qr">确认</el-button>
                </div>

            </div> 
        </el-dialog>

        <!-- 选择团队长 -->
       <el-drawer title="选择团队长" :visible.sync="mtk3.drawer" direction="rtl" :before-close="handleClose" size='400px' style="padding:0px;">
           
        <div style="padding:10px;">
            <el-table :data="mtk3.datalist"  @selection-change="changeCheckBoxValue" :height="dtheight" :border="true" style="width: 100%;" :header-cell-style="{background:'#4F81BC',color:'white'}">      
                <el-table-column label="姓名" align='center' >                   
                    <template slot-scope="scope">
                        <span >{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>  
                <el-table-column label="手机号" align='center' >                   
                    <template slot-scope="scope">
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column> 

                <el-table-column  label="选择" type="selection"></el-table-column>

           </el-table>
        </div>         

            <div style="text-align: center;margin-top:30px;position: absolute; bottom: 50px;left: 0;right: 0;">
                <el-button type="primary" class="custom_color_button" style="width:50%;" @click="team_qr()">确认</el-button>
            </div>
        </el-drawer>


        <!-- 查看已添加成员 -->
        <el-dialog title="已添加成员" :visible.sync="mtk4"  width="700px">
            <div style="width:100%;"> 

             <el-table :data="mtk4_form.datalist" style="width: 100%" height="500px" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">
                
                 <el-table-column label="姓名"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="手机号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                  <el-table-column label="操作" align='center' width="100px" fixed="right">
                    <template slot-scope="scope"> 
                        <el-button size="mini"  type="primary"  plain @click="delect_team(scope.row)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table> 

               <div style="margin-top:20px;text-align: center;">
                    <el-pagination
                        background
                        @current-change="handleCurrentChange1"
                        :page-size="10"  
                        layout="prev, pager, next, jumper"
                        :total="count">
                    </el-pagination>
              </div> 


            </div> 
        </el-dialog>


        <!-- 修改二级密码 -->
        <el-dialog title="修改二级密码" :visible.sync="mtkej"  width="400px">
            <div style="width:100%;"> 

            <el-form ref="form"   label-width="100px" style="width:100%;"> 
                 <el-form-item label="二级密码" label-width="80px" >
                    <el-input v-model="mtkej_form.password" placeholder="二级密码"></el-input>
                </el-form-item>                                
            </el-form>

                <div style="text-align: center;width:50%;margin:auto;margin-top:30px;">
                    <el-button type="primary" style="width:100%;" class="custom_color_button" @click="ej_but_qr">确认</el-button>
                </div>

            </div> 
        </el-dialog>

         <!-- 中心数据 -->
        <el-dialog title="中心数据" :visible.sync="show_data"  width="400px" class="iphone">
            <div class="iphone_box" style="width:100%;height:650px;padding: 10px;box-sizing: border-box;"> 

               <iframe :src="statistics_page" width="100%" height="100%" style="border: 0"></iframe>

            </div> 
        </el-dialog>


   </div>
</template>

<script>

export default {
   name: 'operatelist',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        page:1,
        count:0,
        mtk1:false,
        mtk1_form:{
          name:'',
          head_img:'',
          upfile:'',
          telphone:'',
        },
        my_ctid:'',
        mtk3:{
            datalist:[],
            drawer: false,
            selectdata:[]
        },
        mtk4:false,
        mtk4_form:{
            datalist:[],
        },
        mtkej:false,
        mtkej_form:{
            password:'',
        },

        show_data:false,
        ctid:'',
        statistics_page:''
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 355
      
  },
  mounted (){
    
  },
  methods: {
      tj_but(row){
           this.ctid = row.ctid
           this.statistics_page = ''
           console.log(row)
           this.post("/member/tokenForCenterClient", {
                 ctid:this.ctid
	       }).then(res => {
              console.log(res)
              if(res.error_code == 0){
                    this.statistics_page = this.urlwlj1  + '?token=' + res.result + '&type=1'
                    this.show_data = true
              }else {
                  this.open1(res.message,'warning')
              }
       

            })

     },
      team_fun(){   //选择总团队
          this.post("/operate_center/listOfNoSelected", {
              
	        }).then(res => {
          
            this.mtk3.datalist = res.result
            //console.log(res)
         })
      },
      mtk3_but(row){  //选择团队
          this.my_ctid = row.ctid
          this.team_fun()
          this.mtk3.drawer = true
      },
     changeCheckBoxValue(val){  //添加团队长选中id
       this.mtk3.selectdata = []
 
        val.map((item) => {
            
           this.mtk3.selectdata.push(item.uid)
          
        })
        
        //console.log(this.mtk3.selectdata)
        
     },
     team_qr(){  //添加团队长选中id提交
          this.post("/operate_center/addToCenter", {
              ctid:this.my_ctid,
              arr:this.mtk3.selectdata
	         }).then(res => {

                 if(res.error_code == 0){
                    this.team_fun()
                    this.my_ctid = ''
                    this.mtk3.drawer = false
                    this.open1(res.result,'success')  //提示框
                }else {
                    this.open1(res.message,'warning')
                }


          })
     },
     see_team(row){  //查看已选
          this.my_ctid = row.ctid
          this.mtk4 = true
          this.add_team_fun()
      },
      add_team_fun(){  //查看已选函数
           this.post("/operate_center/listOfContainLeader", {
              page:this.page,
              ctid:this.my_ctid
	        }).then(res => {
            this.count = res.result.count
            this.mtk4_form.datalist = res.result.list
            //console.log(res)
         })
      },
     delect_team(row){  //删除某个团队长

       this.$confirm('此操作将永久解冻用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
         }).then(() => {
                           
           this.post("/operate_center/delSomeLeader", {
              ctid:this.my_ctid,
              id:row.id
	         }).then(res => {

                 if(res.error_code == 0){
                    this.add_team_fun()
                    this.open1(res.result,'success')  //提示框
                }else {
                    this.open1(res.message,'warning')
                }

            })

        }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消解冻'
        //   });          
        });
      
     },
     xg_but(row){  
          this.my_ctid = row.ctid
          this.mtk1_form.name = row.name
          this.mtk1_form.head_img = this.urlimg + row.icon
          this.mtk1_form.upfile = row.icon
          this.mtk1_form.telphone = row.telphone
          this.mtk1 = true
     },
     xg_but_qr(){
          this.post("/operate_center/update", {
              ctid:this.my_ctid,
              name:this.mtk1_form.name,
              icon:this.mtk1_form.upfile,
              telphone:this.mtk1_form.telphone
	         }).then(res => {

                 if(res.error_code == 0){
                    this.$emit('up_list_fun')
                    this.my_ctid = ''
                    this.mtk1 = false
                     this.open1(res.result,'success')  //提示框
                }else {
                    this.open1(res.message,'warning')
                }
          })
     },
     xgej_but(row){
          this.my_ctid = row.ctid
          this.mtkej = true
          this.mtkej_form.password = ''
     },
     ej_but_qr(){
          this.post("/operate_center/updateSafePassword", {
              ctid:this.my_ctid,
              password:this.mtkej_form.password
	         }).then(res => {

                 if(res.error_code == 0){
                    this.$emit('up_list_fun')
                    this.my_ctid = ''
                    this.mtkej = false
                    this.open1(res.result,'success')  //提示框
                }else {
                    this.open1(res.message,'warning')
                }
          })
     },
     handleClose(done) { //关闭团队长弹窗
          done();
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      },
       ImgUploadSectionFile(param){//图片上传    
      },
      beforeupload(file){
        if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.mtk1_form.head_img=windowURL.createObjectURL(file);                
            
             this.upimgpost("/image/uploadMultiple",file).then(res => {
               console.log(res.result.url )
               this.mtk1_form.upfile = res.result.url    
            })

            return false;

     },
       handleSizeChange1(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange1(val) {
        this.page = val
        this.add_team_fun()
        console.log(`当前页: ${val}`);
      },
       go_but(row){

        this.$router.push({
          path: '/index/operatemember',
          query: {
            name:row.name,
            ctid:row.ctid,
          }
        })

    },
    go_gmbut(row){

        this.$router.push({
          path: '/index/operategm',
          query: {
            name:row.name,
            ctid:row.ctid,
          }
        })

    }

  }
}
</script>


<style scoped>
.avatar-uploader  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
 .el-drawer__wrapper>>>.el-drawer__header>:first-child{
      outline: none; 
 }
 .el-drawer__wrapper>>>.el-drawer:focus {
    outline: none; 
}
</style>